{extend name="public:penbase" /}
{block name="header"}
{include file="public/pentop-nav" /}
{/block}
{block name="content"}
<div class="line"></div>
<div id="dialogs">
    <div class="js_dialog" id="dialog" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd yl-dialog-title">
                <div class="box">
                    <span class="span1"></span>
                    <span class="span2"></span>
                    <strong class="weui-dialog__title">确认购买数量</strong>
                </div>
            </div>
            <div class="weui-dialog__bd">
                <form>
                    <div class="weui-cells weui-cells_form yl-cells">
                        <div class="weui-cell yl-cell">
                            <div class="weui-cell__hd"><label class="weui-label">最大可卖数量</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input yl-inp" type="number" pattern="[0-9]*" placeholder="5000">
                            </div>
                        </div>
                        <div class="weui-cell yl-cell">
                            <div class="weui-cell__hd"><label class="weui-label">确认购买数量</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input yl-inp" type="number" pattern="[0-9]*" placeholder="1000">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="yl-dialog-btn-box">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取 消</a>
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">提 交</a>
            </div>
        </div>
    </div>
</div>
<div class="weui-tab__panel" style="background: #f5f5f5">
    <div class="header-box">
        <a href="#" class="sell-btn">
            <p>我要卖出</p>
        </a>

        <div class="s-search">
            <input type="text"/> <a href="javascript:;">搜索</a>
        </div>
    </div>
    <div class="swiper-container">
        <div class="my-pagination">
            <ul class="my-pagination-ul">

            </ul>
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">

                <a class="weui-cell" href="javascript:;">
                    <div class="weui-cell__bd">
                        <p class="table-title">
                            <span></span>交易记录查询
                        </p>
                    </div>
                    <div class="weui-cell__ft table-title-r"><span class="tip">显示第 1 到第 2 条记录，总共 2 条记录</span></div>
                </a>

                <div class="deal-card">
                    <div class="header">
                        <span class="icon card-orange"></span>

                        <p>挂卖数量：<span>150</span></p>
                        <a href="javascript:;" class="showDialog">购买</a>
                    </div>
                    <div class="body">
                        <P>
                            <span class="span1">可卖数量：</span><span class="span2">200000</span>

                        <div class="clear"></div>
                        </P>
                    </div>
                </div>
                <div class="deal-card">
                    <div class="header">
                        <span class="icon card-orange"></span>

                        <p>挂卖数量：<span>150</span></p>
                        <a href="javascript:;" class="showDialog">购买</a>
                    </div>
                    <div class="body">
                        <P>
                            <span class="span1">可卖数量：</span><span class="span2">30000</span>

                        <div class="clear"></div>
                        </P>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <a class="weui-cell" href="javascript:;">
                    <div class="weui-cell__bd">
                        <p class="table-title">
                            <span></span>买单记录查询
                        </p>
                    </div>
                    <div class="weui-cell__ft table-title-r"><span class="tip">显示第 1 到第 2 条记录，总共 2 条记录</span></div>
                </a>

                <div class="deal-card">
                    <div class="header">
                        <span class="icon card-orange"></span>

                        <p>买入数量：<span>150</span></p>
                        <a href="{:url('transaction/fukuan')}">付款</a>
                    </div>
                    <div class="body">
                        <P><span class="span1">卖家地址：</span><span class="span2">商贸城一期二区7号栋117</span>

                        <div class="clear"></div>
                        </P>
                        <P><span class="span1">订单创建时间：</span><span class="span2">2019-02-03</span>

                        <div class="clear"></div>
                        </P>
                        <P><span class="span1">订单状态：</span><span class="span2">已完成</span>

                        <div class="clear"></div>
                        </P>
                    </div>
                </div>
                <div class="deal-card">
                    <div class="header">
                        <span class="icon card-orange"></span>

                        <p>买入数量：<span>150</span></p>
                        <a href="javascript:;">付款</a>
                    </div>
                    <div class="body">
                        <P><span class="span1">卖家地址：</span><span class="span2">商贸城一商贸城一期二区7号栋117商贸城一期二区7号栋117商贸城一期二区7号栋117期二区7号栋117</span>

                        <div class="clear"></div>
                        </P>
                        <P><span class="span1">订单创建时间：</span><span class="span2">2019-02-03</span>

                        <div class="clear"></div>
                        </P>
                        <P><span class="span1">订单状态：</span><span class="span2">已完成</span>

                        <div class="clear"></div>
                        </P>
                    </div>
                </div>

            </div>
            <div class="swiper-slide">
                <a class="weui-cell" href="javascript:;">
                    <div class="weui-cell__bd">
                        <p class="table-title">
                            <span></span>卖单记录查询
                        </p>
                    </div>
                    <div class="weui-cell__ft table-title-r"><span class="tip">显示第 1 到第 2 条记录，总共 2 条记录</span></div>
                </a>

                <div class="deal-card">
                    <div class="header">
                        <span class="icon card-orange"></span>

                        <p>挂卖数量：<span>150</span></p>
                        <a href="javascript:;">购买</a>
                    </div>
                    <div class="body">
                        <P><span class="span1">可卖数量：</span><span class="span2">2500000</span>

                        <div class="clear"></div>
                        </P>
                        <P><span class="span1">已使用数量：</span><span class="span2">205656</span>

                        <div class="clear"></div>
                        </P>
                        <P><span class="span1">订单状态：</span><span class="span2">已完成</span>

                        <div class="clear"></div>
                        </P>
                    </div>
                </div>
                <div class="deal-card">
                    <div class="header">
                        <span class="icon card-orange"></span>

                        <p>挂卖数量：<span>150</span></p>
                        <a href="javascript:;">购买</a>
                    </div>
                    <div class="body">
                        <P><span class="span1">可卖数量：</span><span class="span2">2500000</span>

                        <div class="clear"></div>
                        </P>
                        <P><span class="span1">已使用数量：</span><span class="span2">205656</span>

                        <div class="clear"></div>
                        </P>
                        <P><span class="span1">订单状态：</span><span class="span2">已完成</span>

                        <div class="clear"></div>
                        </P>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__PUBLIC__/pension/js/swiper.min.js"></script>
<script src="__PUBLIC__/pension/js/zepto.min.js"></script>
<script src="__PUBLIC__/pension/js/weui.min.js"></script>
<script src="__PUBLIC__/pension/js/fastclick.min.js"></script>
<script src="__PUBLIC__/pension/js/clipboard.min.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);

        var dialog = $('#dialog');
        $('#dialogs').on('click', '.weui-dialog__btn_default', function () {
            console.log('取消')
            $(this).parents('.js_dialog').fadeOut(200);
        });
        $('#dialogs').on('click', '.weui-dialog__btn_primary', function () {
            console.log('提交')
            $(this).parents('.js_dialog').fadeOut(200);
        });
        $('.showDialog').on('click', function () {
            dialog.fadeIn(200);
        });

        var tabSwiper = new Swiper('.swiper-container', {
            autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
            allowTouchMove: true, // 允许触摸滑动。设为false时，slide无法滑动，只能使用扩展API函数例如slideNext() 或slidePrev()或slideTo()等改变slides滑动
            resistance: true, // 边缘抵抗。当swiper已经处于第一个或最后一个slide时，继续拖动Swiper会离开边界，释放后弹回。
            resistanceRatio: 0.7, // 抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。
            pagination: { // 分页器
                el: '.my-pagination-ul',
                clickable: true,
                clickableClass: 'y-pagination-clickable',
                renderBullet: function (index, className) {
                    switch (index) {
                        case 0:
                            name = '交易中心';
                            break;
                        case 1:
                            name = '我的买单';
                            break;
                        case 2:
                            name = '我的卖单';
                            break;
                        default:
                            name = '';
                    }
                    return '<li class="' + className + '">' + name + '</li>';
                }
            },
        })

    });

</script>
{/block}